<template>
	<div>
		<div class="subject">
			<el-carousel :interval="4000" type="card" :autoplay="false" height="350px">
				<el-carousel-item v-for="item in images" :key="item.demoName">
					<img :src="item.src" @dblclick="quehuan(item)" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<el-divider><i class="el-icon-caret-bottom"></i>页面展示<i class="el-icon-caret-bottom"></i></el-divider>
		<keep-alive>
			<component v-bind:is="currentTabComponent"></component>
		</keep-alive>
	</div>
</template>

<script>
	import sqldemo from '../demoTwo/sqldemo.vue'
	import douyu from '../douyu/DouYuOne.vue';
	import administrator from '../administrators/administrator.vue'
	export default {
		name: 'Demo1',
		components: {
		sqldemo,
		douyu,
		administrator
		},
		data: () => ({
			src: '',
			images: [{src:require('@/assets/static/imgs/2.jpg'),demoName:'sqldemo'}, {src:require('@/assets/static/imgs/3.jpg'),demoName:'douyu'},{src:require(
				'@/assets/static/imgs/4.jpg'),demoName:'administrator'}],
				currentTabComponent:''
		}),
		methods: {
			quehuan(value) {
				this.currentTabComponent = value.demoName
			}
		},
	}
</script>

<style scoped>
	.demo {
		width: 50%;
	}

	.demoOne {
		background-color: #475669;
		float: left;
	}

	.demoTwo {
		background-color: #0c0969;
		float: right;
	}

	/* 轮播图 */
	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.subject img {
		width: 100%;
	}
	.subject{
		top: 10px;
		position: relative;
		margin: auto;
		width: 90%;
	}
</style>
